<template>
  <el-dialog
    title="方案"
    :visible.sync="$attrs.visable"
    width="830px"
    :before-close="handleClose"
    append-to-body
    class="dialog_nopadd"
  >
    <div class="flex">
      <div class="r_left">
        <div
          v-for="(item, index) in optionsList"
          :key="index"
          class="r_item commhover flexbetween c_text3"
          :class="{ active: item.isSelect }"
          @click="handleItem(item)"
        >
          <div class="name c_text">{{ item.title }}</div>
          <div class="c_text3" :class="item.status == 1 ? 'c_00c264' : ''">
            {{ item.status == 0 ? "未配置" : "已配置" }}
          </div>
        </div>
      </div>
      <div class="r_content" v-if="rowItem">
        <!-- 群活码 -->
        <template v-if="rowItem.id == 6">
          <div
            v-for="(item, index) in rowItem.list"
            :key="index"
            class="list-item bg_f9 p-16 br_4 mb-8 flexbetween"
          >
            <div>
              <div class="c_text2 fw-6 mb-5">{{ item.title || "--" }}</div>
              <div>
                <span class="c_text3 pr-16">ID: 32060</span
                ><span class="c_ff0200">关闭</span>
              </div>
            </div>
            <el-button size="small">查看</el-button>
          </div>
        </template>
        <template v-if="rowItem.id == 7">
          <div class="r_imgbox">
            <div>
                <img src="@/assets/images/jifen.png" alt="" class="mb-12" />
            </div>
            <el-button size="small">前往群积分管理</el-button>
          </div>
        </template>
        <template v-if="rowItem.id == 8">
            <div class="r_imgbox">
            <div>
                <img src="@/assets/images/shequn.png" alt="" class="mb-12" />
            </div>
            <div class="mb-12">功能未开启生效</div>
            <el-button size="small">前往智能标签管理</el-button>
          </div>
        </template>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleClose"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      optionsList: [
        {
          id: 1,
          title: "新客户运营",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 2,
          title: "自动踢人",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 3,
          title: "智能应答",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 4,
          title: "入群欢迎语",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 5,
          title: "关键词拉群",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 6,
          title: "群活码",
          status: 1,
          routerName: "",
          list: [{ title: "111111", id: 23520, status: 0 }],
          isSelect: false,
        },
        {
          id: 7,
          title: "群积分",
          status: 0,
          routerName: "",
          list: [],
          isSelect: false,
        },
        {
          id: 8,
          title: "智能标签 社群行为",
          status: 0,
          routerName: "",
          list: [],
        },
      ],
      options: [],
      rowItem: null,
    };
  },
  props: {
    type: {
      default: 1, // 1 转让群主  2 设置群管
    },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleItem(item) {
      this.optionsList.forEach((item) => (item.isSelect = false));
      item.isSelect = true;
      this.rowItem = item;
    },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.r_left {
  width: 230px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 0;
}
.r_item {
  width: 210px;
  padding: 9px 12px;
  margin-bottom: 2px;
  &.active {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-right-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.r_content {
  flex: 1 0;
  padding: 20px;
}
.r_imgbox {
  text-align: center;
  padding-top: 6vh;

  img{
    width: 242px;
  }
}
</style>